<template>
	<view class="page">
		<view class="demand-detail-wrapper">
			<view style="font-weight: 30upx;color: #191919;font-weight: bold;margin-left: 30upx;">
				
					{{detailDemand.title}}
				
				
			</view>
			<view
				style="height: 66upx;margin-top: 30upx;margin-left: 30upx;display: flex;flex-direction: row;align-items: center;">
				<span style="font-size: 24upx;color: #FF4E4C;font-weight: bold;">￥</span>
				<span style="font-size: 48upx;color: #FF4E4C;font-weight: bold;">{{detailDemand.estimateAmount}}</span>

			</view>
			<view style="display: flex;flex-direction: row;margin-top: 30upx;margin-left: 30upx;">
				<view style="font-size: 28upx;color: #191919;">开发语言</view>
				<view style="margin-left: 48upx;font-size: 28upx;color: #191919;">{{detailDemand.techTypeName}}</view>
			</view>
			<view style="display: flex;flex-direction: row;margin-top: 18upx;margin-left: 30upx;">
				<view style="font-size: 28upx;color: #191919;">交付时间</view>
				<view style="font-size: 28upx;color: #191919;margin-left: 48upx;">{{detailDemand.hopeFinishTime}}</view>
			</view>
			<view style="display: flex;flex-direction: row;margin-top: 18upx;margin-left: 30upx;">
				<view style="font-size: 28upx;color: #191919;">需求编号</view>
				<view style="font-size: 28upx;color: #191919;margin-left: 48upx;">{{detailDemand.demandNo}}</view>
			</view>

		</view>
		<view style="width: 100%;height: 24upx;background: #F8F8F8;">
			
		</view>


		<view class="demand-desc-wrapper">
			<view style="font-weight: bold;font-size: 36upx;color: #191919;padding: 36upx 0upx 30upx 30upx;">需求描述</view>

			<view style="font-size: 28upx;color: #191919;margin-left: 30upx;margin-right: 30upx;margin-bottom: 24upx;">
				{{detailDemand.description}}
			</view>
			<view style="display: flex;flex-direction: row;justify-content: center;
			margin-top: 30upx;margin-left: 30upx;margin-right: 30upx;" v-for="(item,index) in imgList" :key="index">

				<image style="border-radius: 12upx;width: 100%;" :src="item" @tap="previewImg(index)" mode="widthFix">
				</image>
			</view>

		</view>



		<view style="position: fixed;bottom: 0upx;height: 164upx;width: 100%;margin-bottom: 0upx;display: flex;
		flex-direction: row;justify-content: space-between;align-items: center;">
			<view style="display: flex;flex-direction: row;">
				<button
					style="display: flex;flex-direction: column;justify-content: center;
					background-color:transparent !important;border: none !important;outline: none !important;"
					@click="shareDemand" open-type="share">
					<image style="width: 48upx;height: 48upx;" src="../../static/images/share-icon.png" mode=""></image>
				</button>

				<view style="display: flex;flex-direction: column;justify-content: center;" @click='copy("复制微信 18483678377 添加好友购买")'>
					<image style="width: 48upx;height: 48upx;" src="../../static/images/customer-icon.png" mode=""></image>
					
				</view>
			</view>
			<view v-if="!detailDemand.isMineDemand">
				<view style="background: #FF4E4C;color: #FFFFFF;font-size: 28upx;
				height: 72upx;width: 268upx;line-height: 72upx;text-align: center;border-radius: 48upx;margin-right: 60upx;"
					@click="toTechAuth" v-if="info.isTechAuth===1">
					申请成为开发者
				</view>
						
				<view style="background: #FF4E4C;color: #FFFFFF;font-size: 28upx;
				height: 72upx;width: 268upx;line-height: 72upx;text-align: center;border-radius: 48upx;margin-right: 60upx;"
					v-if="((info.isTechAuth===3 ||info.isTechAuth===2) && detailDemand.status===3) && (!isAreadyTaking)" @click="popConfirm">
				
					申请接单
				</view>
				
				<view style="background: #FFBCBB;color: #FFFFFF;font-size: 28upx;pointer-events: none;cursor: default;
				height: 72upx;width: 268upx;line-height: 72upx;text-align: center;border-radius: 48upx;margin-right: 60upx;"
					v-if="((info.isTechAuth===3 ||info.isTechAuth===2) && detailDemand.status===4) || isAreadyTaking" @click="applyOrderTaking">
					已接单
				</view>
				<view style="background: #FFBCBB;color: #FFFFFF;font-size: 28upx;pointer-events: none;cursor: default;
				height: 72upx;width: 268upx;line-height: 72upx;text-align: center;border-radius: 48upx;margin-right: 60upx;"
					v-if="(info.isTechAuth===3 ||info.isTechAuth===2) && detailDemand.status===5" @click="applyOrderTaking">
				
					进行中
				</view>
				<view style="background: #FFBCBB;color: #FFFFFF;font-size: 28upx;pointer-events: none;cursor: default;
				height: 72upx;width: 268upx;line-height: 72upx;text-align: center;border-radius: 48upx;margin-right: 60upx;"
					v-if="(info.isTechAuth===3 ||info.isTechAuth===2) && detailDemand.status===6" @click="applyOrderTaking">
				
					已完成
				</view>
			</view>
			
			<view v-if="detailDemand.isMineDemand===null">
				
						
				<view style="background: #FF4E4C;color: #FFFFFF;font-size: 28upx;
				height: 72upx;width: 268upx;line-height: 72upx;text-align: center;border-radius: 48upx;margin-right: 60upx;"
					 @click="popConfirm">
				
					申请接单
				</view>
				
			
			</view>
			
		</view>


		<view class="popup" v-show="show">
			<view class="popup-info">
				<view style="display: flex;flex-direction: column;align-items: center;">
					<view style="color: #191919;font-size: 32upx;margin-top: 48upx;">是否确认接单?</view>
					<view style="color: #A6A6A6;font-size: 28upx;margin-top: 32upx;">
						确认后请保证项目顺利交付
					</view>
				</view>
				
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 56upx;">
					<view style="background: #F4F4F4;color: #191919;font-size: 28upx;width: 240upx;height: 80upx;margin-left: 30upx;border-radius: 32upx;text-align: center;line-height: 80upx;" @tap="cancel">取消</view>
					<view style="background: #FF4E4C;color: #FFFFFF;font-size: 28upx;width: 240upx;height: 80upx;margin-right: 30upx;border-radius: 32upx;text-align: center;line-height: 80upx;" @tap="confrim">确认</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		get,set
	} from '../../utils/local.js'
	import {
		demand_detail,
		apply_order_taking,
		update_view_count
	} from '../../api/home/demand.js'
	import {user_info,login_code} from '../../api/mine/auth.js'
	export default {
		data() {
			return {
				show: false,
				detailDemand: {},
				info: {},
				detailId: "",
				isAreadyTaking:false,
				imgList: [],
				isLogin:false
			}
		},
		methods: {
			copy(val){
				//提示模板
				  uni.showModal({
				    content:val,//模板中提示的内容
				    confirmText:'复制内容',
				    success:(res)=>{//点击复制内容的后调函数
						if(res.confirm){
							//uni.setClipboardData方法就是讲内容复制到粘贴板
							uni.setClipboardData({
							  data:val,//要被复制的内容
							  success:()=>{//复制成功的回调函数
							    uni.showToast({//提示
								  icon:'none',
							      title:'已复制到剪切板'
							    })
							  }
							});
						}else{
							
						}
				      
				    }
				  });
			},
			popConfirm() {
				let token=get('token')
				if(token){
					this.show = true
				}else{
					this.login()
				}
				
			},
			// 点击弹窗取消
			cancel() {
				this.show = false;
			},
			// 点击弹窗确认
			confrim() {
				
				this.applyOrderTaking()
				this.show=false
				
				
			},
			toTechAuth() {
				uni.navigateTo({
					url: '../tech-auth/tech-auth'
				})
			},
			previewImg(index) {
				console.log("index:" + index)
				let _this = this;
				let imgsArray = [];
				for (let i = 0; i < this.imgList.length; i++) {
					imgsArray.push(this.imgList[i]);

				}
				uni.previewImage({
					current: index,
					urls: imgsArray,
					indicator: 'number',
					loop: true,
					longPressActions: {
						itemList: ['保存图片'],
						success(res) {
							console.log(res)
							uni.downloadFile({
								url: this.imgList[index],
								success(result) {
									uni.saveImageToPhotosAlbum({
										filePath: result.tempFilePath,
										success() {
											uni.showToast({
												title: '保存成功'
											})
										}
									})
								}
							})
						}
					}
				});
			},
			login(){
				
				if(this.isLogin){
					return
				}
				var that = this;
				let code = '';
				uni.login({
					provider: "weixin",
					success(res) {
						 code = res.code
					}
				})
				uni.getUserProfile({
					provider:'weixin',
					lang:'zh_CN',
					desc:"用于获取用户信息",
					success: (result) => {
						console.log(result.userInfo)
						let params={}
						params.code=code;
						params.wxUserInfoRequest=result.userInfo;
						login_code(params).then(res=>{
							console.log(res.data)
							set('token',res.data)
							that.getUserInfo()
							setTimeout(function() {
								uni.navigateTo({
									url: '../login/login'
								})
							}, 200)
							
						})
					}
				})
			},

			updateViewCount() {
				let params = {}
				params.id = this.detailId;
				update_view_count(params).then(res => {

				})
			},
			
			getUserInfo(){
				let token=get('token')
				if(token){
					this.isLogin=true
					user_info().then(res=>{
						console.log(res)
						this.userInfo=res.data
						set('userInfo',JSON.stringify(res.data))
					})
					
				}
				
			},
			getDemandDetail(id) {
				let params = {}
				params.id = id
				demand_detail(params).then(res => {
					console.log(res)
					this.detailDemand = res.data
					this.imgList = res.data.image
				})
			},
			shareDemand() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: "威客帮",
					summary: "帮我调试下springboot项目",
					imageUrl: "http://img.imlianka.com/img/1627456015615.jpg?size=300x200",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})
			},
			applyOrderTaking() {
				let params = {}
				params.demandId = this.detailId
				apply_order_taking(params).then(res => {
					if (res.status === 200) {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							title: '申请成功,请耐心等待客服派单'
						})
						this.isAreadyTaking=true
					}
				})
			}
		},
		onShow() {
			this.updateViewCount()
		},
		onLoad(option) {
			this.getDemandDetail(option.id)

			this.detailId = option.id
			let userInfo = get('userInfo')
			if (userInfo) {
				this.info = JSON.parse(userInfo)
			}
		}

	}
</script>

<style>
	.page {
		background: #F8F8F8;
	}

	.demand-desc-wrapper {
		margin-top: 12upx;
		background: #FFFFFF;
		width: 100%;
	}

	.demand-detail-wrapper {
		height: 352upx;
		/* margin-top: 30upx; */
		background: #FFFFFF;
		width: 100%;

	}

	button::after {
		border: none;
	}

	.popup-info {
		position: fixed;
		width: 600upx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 40upx;
		border-radius: 20upx;
		background-color: #fff;
		z-index: 9999;
	}

	.popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9998;
	}
</style>
